<template>
  <div class="index-view">
    <div class="index-cont">
      <van-tabs animated @change="onClick">
        <van-tab title="推荐">
          <div class="index-first">
            <div class="index-swiper">
              <swiper v-if="imgUrls.length > 0" indidator-dots="imgUrls.length > 1" >
                <block v-for="(item, index) in imgUrls" :key="index" >
                  <swiper-item>
                    <image :src="item.image" mode="scaleToFill"></image>
                  </swiper-item>
                </block>
              </swiper>
            </div>
            <div class="boss">
              <image src="http://mss.sankuai.com/v1/mss_51a7233366a4427fa6132a6ce72dbe54/newsPicture/05558951-de60-49fb-b674-dd906c8897a6"></image>
            </div>
            <div class="famous-teach">
              <teach :teachList="teachList"></teach>
            </div>
            <div class="famous-hot">
              <hot></hot>
            </div>
            <div class="famous-slove">
              <solve :sloveList="sloveList"></solve>
            </div>
          </div>
        </van-tab>
        <van-tab title="名师">
          <div class="index-second">
            <teas :teachList="teachList"></teas>
          </div>
        </van-tab>
        <van-tab title="早盘">
          <div class="index-third">
            <videose :zaoList="zaoList"></videose>
          </div>
        </van-tab>
        <van-tab title="午盘">
          <div class="index-third">
            <videose :zaoList="zaoList"></videose>
          </div>
        </van-tab>
        <van-tab title="晚盘">
          <div class="index-third">
            <videose :zaoList="zaoList"></videose>
          </div>
        </van-tab>
        <van-tab title="节目">
          <div class="index-third">
            <program :zaoList="zaoList"></program>
          </div>
        </van-tab>
        <van-tab title="大师课">
          <div class="index-third">
            <master :masterList="masterList"></master>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    
  </div>
</template>

<script>
import card from '@/components/card';
import teach from '@/components/teach';
import hot from '@/components/hot';
import solve from '@/components/index/slove';
import teas from '@/components/index/teach';
import videose from '@/components/common/video';
import program from '@/components/index/program';
import master from '@/components/index/master';
export default {
  data () {
    return {
      motto: 'Hello miniprograme',
      userInfo: {
        nickName: 'mpvue',
        avatarUrl: 'http://mpvue.com/assets/logo.png'
      },
      imgUrls: [],
      teachList: [],
      sloveList: [],
      zaoList: [],
      wuList: [],
      wanList: [],
      type: 1,
      masterList:[],
    }
  },

  components: {
    card,
    teach,
    hot,
    solve,
    teas,
    videose,
    program,
    master
  },
  mounted() {
    this.getBanner()
    this.getTeach()
    this.getSlove()
    // this.getSlove1()
  },

  methods: {
    onClick(event) {
      var num = event.mp.detail.index
      if(num == 2) {
        this.type = 1
        this.getSlove1(this.type)
      }else if (num == 3) {
        this.type = 2
        this.getSlove1(this.type)
      }else if (num == 4) {
        this.type = 3
        this.getSlove1(this.type)
      }else if (num == 5) {
        this.type = 5
        this.getSlove1(this.type)
      }else if (num == 6) {
        this.getMaster()
      }
    },
    getBanner() {
      this.$http.get({
        url: 'banner/banner',
        data: {
          platform: 2
        }
      }).then((res) => {
        this.imgUrls = res.data
      })
    },
    getTeach() {
      this.$http.get({
        url: 'teacher/list',
        data: {}
      }).then((res) => {
        this.teachList = res.data
      })
    },
    getSlove() {
      this.$http.get({
        url: 'video/latest',
        data: {
          size: 8,
          page: 1
        }
      }).then((res) => {
        this.sloveList = res.data.video
      })
    },
    getSlove1(type) {
      this.$http.get({
        url: 'video/latest',
        data: {
          size: 8,
          page: 1,
          type: type
        }
      }).then((res) => {
        this.zaoList = res.data.video
      })
    },
    getMaster() {
      this.$http.get({
        url: 'ad/rigth',
        data: {
          platform: 2
        }
      }).then((res) => {
        this.masterList = res.data
      })
    }
    
    
    
  },

  created () {
    // let app = getApp()
  }
}
</script>

<style scoped>
.index-view .index-cont .van-tab {
  font-size: 16px;
}
.index-view .index-cont .index-first,.index-view .index-cont .index-second,.index-third {
  width: 6.78rem;
  margin: 0 auto;
  padding-top: 0.24rem;
}
.index-view .index-cont .index-first .index-swiper ._swiper {
  height: 80px;
}
.index-view .index-cont .index-first .index-swiper ._swiper ._swiper-item image {
  width: 339px;
  height: 79px;
}
.index-view .index-cont .index-first .boss {
  width: 100%;
  height: 2.3rem;
  margin-top: 0.24rem;
}
.index-view .index-cont .index-first .boss image {
  width: 100%;
  height: 100%;
}
.index-view .index-cont .index-first .famous-teach {
  margin-top: 0.4rem;
}
.index-view .index-cont .index-first .famous-hot {
  margin-top: 0.7rem;
}
</style>
